import window from '../ui/web/window';

do { window::mount Root };

type Name {
    first: String,
    last:  String
};

const Root: ui::Component :=
    \ name := use { ui::State { |Name| { first: '', last: '' } } },
    let row := { ui::StyledContainer ['row'] },
    let first := (name proj |.(first)|),
    let last := (name proj |.(last)|),
    { { ui::StyledContainer ['container'] } [
        { row [
            { ui::Label 'First Name:' },
            { ui::Input first },
            { ui::Button ('clear', (first update &(_) => '')) }
        ] },
        { row [
            { ui::Label 'Last Name:' },
            { ui::Input last },
            { ui::Button ('clear', (last update &(_) => '')) }
        ] },
        { row [
            { ui::Label 'Full Name:' },
            { ui::Label ({ watch name } map &{first,last} => { "? ?" (first, last) }) }
                . { with { ui::Style ['seal'] } }
        ] }
    ] };
